<template>
  <el-dialog v-model="visible" title="设置必填项" width="600px" append-to-body>
    <el-form ref="formRef" :model="formData" label-width="120px">
      <el-form-item label="设置必填项" prop="validateFields">
        <el-select v-model="formData.validateFields" clearable multiple style="width: 100%;">
          <el-option v-for="item in options" :key="item.value" v-bind="item"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="submit">保 存</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { feeAddRequiredField } from '@/api/Reimbursement/feeConfig'

export const requiredList = [
  {label: '税额分摊 · 摘要', value: 'tax_summary'},
  {label: '税额分摊 · 承担部门', value: 'tax_check'},
  {label: '税额分摊 · 费用承担组织', value: 'tax_expenseBearingOrg'},
  {label: '不含税分摊 · 摘要', value: 'summary'},
  {label: '不含税分摊 · 承担部门', value: 'check'},
  {label: '不含税分摊 · 预算成本中心', value: 'target'},
  {label: '不含税分摊 · 渠道', value: 'channel'},
  {label: '不含税分摊 · 段', value: 'segment'},
  {label: '不含税分摊 · 品牌', value: 'brand'},
  {label: '不含税分摊 · 费用承担组织', value: 'expenseBearingOrg'},
]

export default defineComponent({
  emits: ['refresh'],
  setup(props, context) {
    const state = reactive({
      visible: false,
      formData: {
        ids: '',
        validateFields: [],
      },
      options: requiredList,
      loading: false
    })

    const close = () => {
      state.visible = false
    }

    const submit = () => {

      feeAddRequiredField({
        ids: state.formData.ids,
        validateFields: state.formData.validateFields.join(',')
      }).then(res => {
        state.loading = false
        close()
        context.emit('refresh')
      }).catch(() => {
        state.loading = false
      })
    }

    context.expose({
      show(ids) {
        state.formData.ids = ids
        state.formData.validateFields = []
        state.visible = true
      }
    })

    return {
      ...toRefs(state),
      submit,
      close
    }
  }
})
</script>
